<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { Steps } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import BasicInfoForm from './components/BasicInfoForm.vue'
import AssessmentInfoForm from './components/AssessmentInfoForm.vue'
import DetailInfoForm from './components/DetailedInfoForm.vue'
import FinishForm from './components/FinishForm.vue'
import { PageWrapper } from '@/components/Page'
import { createSalarySlip, getSalarySlip, updateSalarySlip } from '@/api/wages/salaryslip'

const Step = Steps.Step

const { query } = useRoute()

// 表基本信息
const basicInfo = ref<any>()
// 表详细信息
const detailInfo = ref<any>()

const assessmentInfo = ref<any>()

const basicInfoValue = ref()

const detailInfoValue = ref()

const assessmentValue = ref()

const isUpdate = ref(true)

const current = ref(0)
const state = reactive({
  initSetp2: false,
  initSetp3: false,
  initSetp4: false,
})

function handleStep1Next(step1Values: any) {
  current.value++
  basicInfoValue.value = step1Values
  state.initSetp2 = true
}

function handleStepPrev() {
  current.value--
}

async function handleStep2Next(step2Values: any) {
  current.value++
  detailInfoValue.value = step2Values
  state.initSetp3 = true
}

async function handleStep3Next(step3Values: any) {
  assessmentValue.value = step3Values
  await handleSubmit()
  current.value++
  state.initSetp4 = true
}

async function handleSubmit() {
  basicInfoValue.value.id = query.id as unknown as number
  const salaryData = {
    salarySlipSaveReqVO: basicInfoValue.value,
    recordSaveReqVO: detailInfoValue.value,
    assessmentSaveReqVO: assessmentValue.value,
  }
  if (isUpdate.value)
    await updateSalarySlip(salaryData)
  else
    await createSalarySlip(salaryData)
}

function handleRedo() {
  current.value = 0
  state.initSetp2 = false
  state.initSetp3 = false
  state.initSetp4 = false
}

async function getList() {
  const tableId = query.id as unknown as number
  if (tableId) {
    isUpdate.value = true
    const res = await getSalarySlip(tableId)
    basicInfo.value = res.salarySlipRespVO
    detailInfo.value = res.recordRespVO
    assessmentInfo.value = res.assessmentRespVO
  }
  else {
    isUpdate.value = false
  }
}

onMounted(async () => {
  await getList()
})
</script>

<template>
  <PageWrapper>
    <div class="mx-auto my-0 mt-2.5 w-200">
      <Steps :current="current">
        <Step title="基本信息" />
        <Step title="详细信息" />
        <Step title="考核信息" />
        <Step title="完成" />
      </Steps>
    </div>

    <div class="m-5">
      <BasicInfoForm v-show="current === 0" :is-update="isUpdate" :basic-info="basicInfo" @next="handleStep1Next" />
      <DetailInfoForm
        v-show="current === 1"
        :detail-info="detailInfo"
        :is-update="isUpdate"
        @prev="handleStepPrev"
        @next="handleStep2Next"
      />
      <AssessmentInfoForm
        v-show="current === 2"
        :assessment-info="assessmentInfo"
        :is-update="isUpdate"
        @prev="handleStepPrev"
        @next="handleStep3Next"
      />
      <FinishForm v-show="current === 3" v-if="state.initSetp3" :is-update="isUpdate" @redo="handleRedo" />
    </div>
  </PageWrapper>
</template>
